import React, { Component } from 'react';
import { Block } from '_platform/components4max/Block';
import { BarChart } from '_platform/components4max/Charts/Bar';
import { Icon,notification } from 'antd';
const echarts = require('echarts');


export default class Chart5 extends Component {
    constructor() {
        super();
        this.state = {
        }
        this.projColumn = [{
            dataIndex:'name',
            render: (text, record, index) => {
                return (
                    <div style={{ position: 'relative', height: 17, width: '100%' }}>
                        <div style={{ display: 'inline-block', width: '70%', textAlign: 'left', paddingLeft: '10px' }}>
                            <div className={style.iconPdf} ></div><p style={{ display: 'inline-block',marginLeft:23 }}>{text}</p>
                        </div>
                        <div style={{ display: 'inline-block', width: '30%', textAlign: 'right', paddingRight: '10px' }}>
                            <a><Icon type='download' onClick={()=>{this.onDownloadClick(record.file)}}/></a>
                        </div>
                    </div>
                );
            }
        }]
    }
    
    render() {
        var data = ['项目一', '项目二', '项目三', '项目四', '项目五', '项目六', '项目七', '项目八'];
        var data1 = ['45', '123', '65', '145', '54', '145', '56', '54'];
        var data2 = ['123', '44', '124', '34', '23', '123', '23', '15'];
        var datap = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
        var data3 = ['45', '123', '65', '145', '54', '145', '56', '54', '54', '145', '56', '54'];
        var data4 = ['123', '44', '124', '34', '23', '123', '23', '15', '123', '44', '124', '34'];
        var datab = ['项目一', '项目二', '项目三', '项目四', '项目五', '项目六'];
        var data5 = ['45', '23', '65', '45', '54', '45'];
        return (
                <BarChart style={{ width: '100%', height: '100%' }}
                option={{
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        },
                        // formatter: function (datas) {
                        //     let totaldata = datas[0].value;
                        //     let factorydata = datas[1].value;
                        //     return ('已完成' + (factorydata / totaldata * 100).toFixed() + '%')
                        // }.bind(this)
                    },
                    grid: {
                        top: '30px',
                        bottom: '20px'
                    },
                    legend: {
                        data: ['已完成产值', '未完成产值'],
                        orient: 'horizontal',
                        x: 'right',
                        textStyle: {
                            color: '#fff'
                        },

                    },
                    xAxis: [
                        {
                            type: 'value',
                            axisPointer: {
                                type: 'shadow'
                            },
                            axisLabel: {
                                color: '#fff'
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#ffffff'
                                }
                            },
                            axisTick: {
                                alignWithLabel: true
                            },
                            z: 5
                        }
                    ],
                    yAxis: [
                        {
                            type: 'category',
                             data: ['项目一', '项目二', '项目三', '项目四', '项目五', '项目六'],
                            axisLine: {
                                lineStyle: {
                                    color: '#ffffff'
                                }
                            },
                            axisLabel: {
                                color: '#fff'
                            }
                        },
                    ],
                    series: [
                        {
                            name: '已完成产值',
                            type: 'bar',
                            barWidth: '30%',
                            data: [90, 90, 80, 40, 40, 70],
                            stack: '产值情况',
                            itemStyle: {
                                normal: {
                                    color: '#4de4f8'
                                }
                            }
                        },
                        {
                            name: '未完成产值',
                            type: 'bar',
                            barWidth: '30%',
                            data: [10, 10, 20, 60, 60, 30],
                            stack: '产值情况',
                            itemStyle: {
                                normal: {
                                    color: 'red'
                                }
                            }
                        }
                    ]
                }}
                />
        )
    }
}
